<template>
  <el-row id="cpts-procedure">
    <el-row v-if="!isViewShow" class="permission" style="color: black">
      没有权限!
    </el-row>
    <el-card v-else class="box-card">

      <div slot="header" class="clearfix">
        <span>工序</span>
        <el-button :disabled="!isViewEdit" style="float: right; padding: 6px 6px;" type="primary" @click="openAddDialog">添加<i class="el-icon-plus el-icon--right"></i></el-button>
      </div>

      <el-table
        :data="tableData"
        stripe
        border
        style="width: 100%;"
        max-height="644">
        <el-table-column
          align="center"
          prop="name"
          label="工序名称">
        </el-table-column>
        <el-table-column
          align="center"
          prop="code"
          label="工序编码">
        </el-table-column>
        <el-table-column
          align="center"
          prop="location"
          label="工序位置">
        </el-table-column>
        <el-table-column
          :formatter="statusFormatter"
          align="center"
          prop="status"
          label="工序状态">
        </el-table-column>
        <el-table-column
          align="center"
          prop="specification"
          label="工序说明">
        </el-table-column>

        <el-table-column label="操作"  align="center">
          <template slot-scope="scope">
            <el-button :disabled="!isViewEdit"
              size="mini"
              @click="handleInfo(scope.$index, scope.row)">编辑</el-button>
            <el-button :disabled="!isViewEdit"
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>

      <!--分页-->
      <div style="text-align: center;margin-top: 10px;">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="paginationCount"
          :current-page="currentPage"
          :page-size="pageSize"
          @current-change="currentChange">
        </el-pagination>
      </div>

    </el-card>

    <!--弹窗-->
    <el-dialog title="添加/编辑" :visible.sync="editDialogShow">
      <el-form :model="ruleForm" ref="ruleForm" :rules="rules" label-width="100px">

        <el-row>
          <el-col :span="8">
            <el-form-item label="工序名称" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工序编码" prop="code">
              <el-input  v-model="ruleForm.code"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工序位置" prop="location">
              <el-input v-model="ruleForm.location"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="工序状态" prop="status">
              <el-select v-model="ruleForm.status" placeholder="请选择">
                <el-option
                  v-for="item in fields"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工序说明" prop="specification">
              <el-input v-model="ruleForm.specification"></el-input>
            </el-form-item>
          </el-col>

        </el-row>

        <el-row class="cp-submit-layout">
          <el-button @click="submitAdd('ruleForm')" type="primary" :loading="false">提交</el-button>
        </el-row>

      </el-form>
    </el-dialog>

    <el-dialog
      title="提示"
      :visible.sync="warnDialogShow"
      width="30%">
      <span>该数据正在被使用,删除会影响数据的正常上报。确定需要删除么?</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="warnDialogShow = false">取 消</el-button>
    <el-button type="primary" @click="handlerDeleteForWarn">确 定</el-button>
  </span>
    </el-dialog>

  </el-row>

</template>

<script>
    export default {
        name: "procedure",
      data(){
          return {
            isViewShow: false,
            isViewEdit: false,
            paginationCount: 11,
            currentPage: 1,
            pageSize: 11,
            editDialogShow: false,
            warnDialogShow:false,
            deleteId: '',
            deleteStatus: 0,
            tableData: [],
            fields:[{value: 0,label: '未使用'},{value: 1,label: '正常使用'}],
            ruleForm:{
              id: "",
              name: "",
              code: "",
              location: "",
              status: 0,
              specification: ""
            },
            rules: {
              name:[
                { required: true, message: '请输入', trigger: 'blur' },
              ],
              code:[
                { required: true, message: '请输入', trigger: 'blur' },
              ],
            },
          }
      },
      mounted(){
        let obj = this.validateGlobal.getPermission(17)
        this.isViewShow = obj.isViewShow
        this.isViewEdit = obj.isViewEdit
          this.askListsData()
      },
      methods:{
        statusFormatter(row, column) {
          let status = row.status;
          if(status === 0){
            return '未使用'
          } else {
            return '正常'
          }
        },
        openAddDialog: function(){
          if (!this.editDialogShow) {
            this.editDialogShow = true
          }
          this.resetForm()
        },
        handleDelete: function(index,item){
          this.deleteId = item.id
          if (item.isBinding === 0){
            this.deleteStatus = 0
            this.deleteItem()
          }else{
            this.deleteStatus = 1
            if (!this.warnDialogShow) {
              this.warnDialogShow = true
            }
          }
        },
        handleInfo: function(index, row) {
          console.log(index, row);
          this.ruleForm = this.validateGlobal.cloneObject(row)
          if (!this.editDialogShow) {
            this.editDialogShow = true
          }
        },
        currentChange: function(currentPage){
          this.currentPage = currentPage;
          this.askListsData()
        },
        submitAdd: function (formName) {
          let _that = this
          this.$refs[formName].validate((valid) => {
            if (valid) {
              _that.postNewDatas()
            } else {
              _that.$message('输入有误!');
              return false;
            }
          });
        },
        resetForm: function(){   // 表单重置
           /*if (this.$refs['ruleForm']!==undefined) {
             this.$refs['ruleForm'].resetFields();
           }*/
          this.ruleForm.id = ''
          this.ruleForm.name = ''
          this.ruleForm.code = ''
          this.ruleForm.location = ''
          this.ruleForm.status = 0
          this.ruleForm.specification = ''
        },
        handlerDeleteForWarn(){
          let _that = this
          this.deleteItem()
          // this.dataItems.splice(this.dataItems.findIndex(item => item.id === _that.deleteId), 1)
          this.warnDialogShow = false
        },
        askListsData: function () {
          let _that = this
          let userId = sessionStorage.getItem("userId")
          let url = _that.ports.procedureManage.process.lists
          let askData = {
            userId: userId,
            current: _that.currentPage,
            size: _that.pageSize
          }
          this.http.get(url,askData, res => {
            console.log("procedureLists",res)
            if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
              _that.tableData = res.data.records
              _that.paginationCount = res.data.total
            }else{
              _that.$message('列表获取失败!');
            }
          })
        },
        postNewDatas: function () {
          let _that = this
          let userId = sessionStorage.getItem("userId")
          let url = _that.ports.procedureManage.process.add + "?userId="+ userId
          let askData = _that.ruleForm
          this.http.post(url,askData, res => {
            if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
              _that.$message('添加成功!');
              _that.editDialogShow = false
              _that.askListsData()
              _that.$emit('func')
            }else{
              _that.$message('新增失败!');
            }
          })
        },
        deleteItem:function () {
          let _that = this
          let userId = sessionStorage.getItem("userId")
          let url = _that.ports.procedureManage.process.delete
          let askData = {
            userId: userId,
            isBinding: _that.deleteStatus,
            id:_that.deleteId,
          }
          this.http.get(url,askData, res => {
            if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
              _that.$message('删除成功!');
              _that.askListsData()
              _that.$emit('func')
            }else{
              _that.$message('删除失败!');
            }
          })
        }
      }
    }
</script>

<style lang="scss">
  #cpts-procedure{
    .el-card{
      margin: 10px 10px 0px 0px;
      height: 780px;
    }

    .cp-submit-layout{
      display: flex;
      justify-content: center;
    }
  }

</style>
